<template>
    <div class="applyWrap">
        <el-form :model="formObj" label-width="60px" size="small">
            <el-row>
                <el-col :span="9">
                    <el-form-item label="开票单位">
                        <SelectTreeCom
                            v-model="formObj.deptCode"
                            ref="SelectTreeCom"
                            @initFinished="getList"
                            :errorMessage="'请选择开票单位'"
                        ></SelectTreeCom>
                    </el-form-item>
                </el-col>

                <el-col :span="5">
                    <el-form-item label="发票类型">
                        <dict-select
                            v-model="formObj.fplx"
                            :dict-code="DictCode.VMS_FPLX"
                            style="width: 100%"
                        ></dict-select>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="匹配日期" label-width="100px">
                        <el-date-picker
                            v-model="date1"
                            type="daterange"
                            range-separator="~"
                            value-format="yyyy-MM-dd"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            style="width: 100%"
                            :clearable='false'
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="9">
                    <el-form-item label="发票号码">
                        <el-input
                            v-model="formObj.fphm"
                            maxlength="20"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="发票代码">
                        <el-input
                            v-model="formObj.fpdm"
                            maxlength="12"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="允许金额差异" label-width="100px">
                        <el-input
                            style="width: calc(50% - 10px)"
                            v-model="formObj.minVal"
                            @blur="cleanInput(formObj, 'minVal')"
                        ></el-input>
                        <div style="display: inline-block; padding: 0 4px">
                            ~
                        </div>
                        <el-input
                            style="width: calc(50% - 10px)"
                            v-model="formObj.maxVal"
                            @blur="cleanInput(formObj, 'maxVal')"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div style="margin-bottom: 12px">
            <el-button size="small" type="primary" @click="add">新增</el-button>
                            <el-button
                    @click="exportFile"
                    type="primary"
                    :disabled="pages.total <=0"
                    size="small"
                    style="margin-bottom: 6px"
                >
                    导出
                </el-button>
            <div style="float: right">
                <el-button
                    @click="getList"
                    type="primary"
                    size="small"
                    style="margin-bottom: 6px"
                >
                    查询
                </el-button>
                <el-button
                    @click="reset"
                    type="primary"
                    size="small"
                    style="margin-bottom: 6px"
                >
                    重置
                </el-button>
                    <!--  -->


            </div>
        </div>

        <tableList
            border
            :heightMin="200"
            :keySet="keySet"
            :tableData="listDetails"
            :paginationShow="true"
            :pageNumber="pages.current"
            :pageSize="pages.size"
            :total="pages.total"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
            handlerFixed="right"
            :handlerShow="true"
        >
            <template #handler="{ row }">
                <div @click="look(row)" class="worldBlueBtn">查看</div>
            </template>
        </tableList>

        <DifferenceAmountDialog
            v-model="differenceDialogShow"
            :matid='matid'
            :isApply='1'
        ></DifferenceAmountDialog>

        <matchFlowApplyDialog
            ref="matchFlowApplyRef"
            v-if="matchFlowApplyShow"
            @voiceDialogFn="voiceDialogFn"
        ></matchFlowApplyDialog>
    </div>
</template>

<script>
import tableList from '@/components/tableList/index.vue'
import SelectTreeCom from '@/components/selectTree/selectTreeCom.vue'
import { checkBeforeAdd, getProcessList } from '@/api/handInvoiceAdd.js'
import { currentMonthFirstDayAndLastDay, formaDate } from '@/utils/getTime.js'
import { getListAxios ,exportList} from '@/api/matchFlow.js'
import { valitedLimitNumber } from '@/utils/validate.js'
import { DictCode } from '@/utils/DictConstant'
import DifferenceAmountDialog from './DifferenceAmountDialog.vue'
import matchFlowApplyDialog from './matchFlowApplyDialog.vue'
import DictSelect from '@/views/invoiceTemplate/components/DictSelect/DictSelect.vue'

export default {
    name: 'invoiceMatchFlowApply',

    computed: {
        DictCode() {
            return DictCode
        },
    },

    data() {
        return {
            date1: ['', ''],
            matchFlowApplyShow: false,
            addVoiceDialogShow: false,
            differenceDialogShow: false,
            matid: '',
            listDetails: [],
       
            formObj: {
                deptCode: '',
                fplx: '01',
                fphm: '',
                fpdm: '',
                yxjecyq: '',
                yxjecyz: '',
            },
            pages: {
                current: 1,
                size: 10,
                total: 0,
            },
                 keySet: [
                {
                    label: '开票单位',
                    englishName: 'kpdw',
                    width: '120',
                },
                {
                    label: '发票种类',
                    englishName: 'fplx',
                },
                {
                    label: '发票代码',
                    englishName: 'fpdm',
                    width: '250',
                },
                {
                    label: '发票号码',
                    englishName: 'fphm',
                    width: '120',
                },
                {
                    label: '开票日期',
                    englishName: 'kprq',
                    width: '200',
                },
                {
                    label: '开票金额',
                    englishName: 'kpje',
                    width: '200',
                },
                {
                    label: '税额',
                    englishName: 'se',
                    width: '200',
                },
                {
                    label: '流水金额',
                    englishName: 'lsje',
                    width: '200',
                },
                {
                    label: '流水税额',
                    englishName: 'lsse',
                    width: '200',
                },
                {
                    label: '税额差异',
                    englishName: 'secy',
                    width: '200',
                },
                {
                    label: '允许金额差异',
                    englishName: 'yxjecy',
                    width: '200',
                },
                {
                    label: '差异原因',
                    englishName: 'cyyy',
                    width: '200',
                },
                {
                    label: '申请说明',
                    englishName: 'sqsm',
                    width: '200',
                },



                 {
                    label: '受票方名称',
                    englishName: 'spfmc',
                    width: '200',
                },
                {
                    label: '受票方识别号',
                    englishName: 'spfsbh',
                    width: '200',
                },
                {
                    label: '受票方银行账号',
                    englishName: 'spfyhzh',
                    width: '200',
                },
                {
                    label: '受票方地址电话',
                    englishName: 'spfdzdh',
                    width: '200',
                },
            ],
        }
    },
    created() {
        this.getCurrentDate()
    },
    methods: {
        look(val) {
            this.matid = val.matid;
            this.differenceDialogShow = true
        },
        getCurrentDate(){
            let { firstDay, LastDay } = currentMonthFirstDayAndLastDay()
            this.date1 = [formaDate(firstDay),formaDate(LastDay)]
        },
        cleanInput(obj, param) {
            let input = this.formObj[param]
            // 移除所有非数字、小数点和负号
            let cleaned = input.replace(/[^-0-9.]/g, '')

            // 如果负号出现在数字之后（即不是负数），则移除它
            cleaned = cleaned.replace(/(?!^)-/g, '')

            // 如果存在多个小数点，则只保留第一个
            cleaned = cleaned.replace(/\.(?=.*\.)/g, '')

            // 确保负号在最前面，并且仅当其后跟着数字
            if (cleaned !== '' && cleaned.charAt(0) !== '-') {
                cleaned = cleaned.replace(/-/g, '') // 移除所有负号
            } else if (cleaned.indexOf('-') > 0) {
                cleaned = '-' + cleaned.replace(/-/g, '') // 确保负号在最前面
            }

            if (cleaned) {
                cleaned = this.bigNumFixed(
                    valitedLimitNumber(cleaned, {
                        leftLength: 18,
                        rightLength: 2,
                    }),
                    2
                )
            }
            this.formObj[param] = cleaned
            if(this.formObj.minVal&& this.formObj.maxVal){
                if(this.bigNumcomparedTo(this.formObj.minVal,this.formObj.maxVal)){
                    this.$message.error("允许金额差异,右侧值要大于左侧值")
                }
            }

        },
        handleCurrentChange(val) {
            this.pages.current = 1
            this.getList()
        },
        handleSizeChange(val) {
            this.pages.current = 1
            this.pages.size = val
            this.getList()
        },

        reset() {
            this.getCurrentDate()
            this.$refs.SelectTreeCom.clearableFn()
            this.formObj = {
                deptCode: this.$store.state.user.baseInfo.deptCode,
                fplx: '01',
                fphm: '',
                fpdm: '',
                yxjecyq: '',
                yxjecyz: '',
            }

        },
        exportFile(val) {
            exportList({
                pageNo: this.pages.current,
                pageSize: this.pages.size,

                deptCode: this.formObj.deptCode,
                fplx: this.formObj.fplx,
                pprqq: this.date1[0],
                pprqz: this.date1[1],

                fpdm: this.formObj.fpdm,
                fphm: this.formObj.fphm,

                yxjecyq: this.formObj.minVal,
                yxjecyz: this.formObj.maxVal,
            }).then(({ code, data ,message}) => {
                // this.$message.success(data|| message)
                // if (code == 200) {
                //     
                // }
            })
        },
        voiceDialogFn(val) {
            this.matchFlowApplyShow = val || false
            this.getList()
        },
        async add(val, isLook) {
            sessionStorage.setItem(
                'handleDetailInfo',
                JSON.stringify({
                    activeComNumber: '25',
                    titleInfo: '新增发票匹配流水申请',
                    searchParams: {},
                    busType: 'FLOW_PPLS',
                    busId: '',
                })
            )

            this.matchFlowApplyShow = true
            setTimeout(() => {
                this.$refs.matchFlowApplyRef.show('ADD')
            }, 50)
        },
        voiceDialogFn(val) {
            this.addVoiceDialogShow = val || false
            this.getList()
        },
        getList() {
            getListAxios({
                pageNo: this.pages.current,
                pageSize: this.pages.size,

                deptCode: this.formObj.deptCode,
                fplx: this.formObj.fplx,
                pprqq: this.date1[0],
                pprqz: this.date1[1],

                fpdm: this.formObj.fpdm,
                fphm: this.formObj.fphm,

                yxjecyq: this.formObj.minVal,
                yxjecyz: this.formObj.maxVal,
            }).then(({ code, data }) => {
                if (code == 200) {
                    // console.log(data)
                    setTimeout(() => {
                        this.listDetails = data.records.map((item) => {
                            return {
                                ...item,
                            }
                        })
                        this.pages.current = data.current
                        this.pages.size = data.size
                        this.pages.total = data.total
                    })
                }
            })
        },
    },
    components: {
        tableList,
        SelectTreeCom,
        DictSelect,
        DifferenceAmountDialog,
        matchFlowApplyDialog,
    },
}
</script>

<style lang = "scss" scoped>
.applyWrap {
    box-sizing: border-box;
}
::v-deep .el-form-item {
    margin-bottom: 12px;
}

::v-deep .el-table__body tr.current-row > td {
    background-color: #fbec88 !important;
}
::v-deep .el-table__body tr.current-row > td.el-table__cell {
    background-color: #fbec88 !important;
}
</style>
